<!--
 * @Author: Aaron
 * @Date: 2022-04-07 14:32:29
 * @LastEditors: Aaron
 * @LastEditTime: 2022-04-20 14:03:47
 * @Description: file content
 * @FilePath: \ias_ui\src\views\coi\spuManagement\components\sinkingAttribute.vue
 * @Company: 沃尔玛
-->
<template>
  <el-dialog title="SKU属性编辑" :visible.sync="value" width="1050px" :before-close="handleClose">
    <el-form ref="ruleForm" class="dataForm" :model="formData" label-width="150px" size="mini" label-position="left">
      <category-attributes
        :xl="12"
        :commodity-attribute="formData"
        :category-attributes="formData.keyAttributes"
        key-name="keyAttributes"
        :is-disabled="isDisabled"
        att-name="关键属性"
      />
      <category-attributes
        :xl="12"
        :commodity-attribute="formData"
        :category-attributes="formData.variableAttribute"
        key-name="variableAttribute"
        :is-disabled="isDisabled"
        att-name="类目属性"
      />
    </el-form>
    <span v-if="!isDisabled" slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="mini" :loading="loading" @click="sava">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import categoryAttributes from '@/views/coi/components/categoryAttributes.vue'

export default {
  name: 'SinkingAttribute',
  components: {
    categoryAttributes
  },
  model: {
    prop: 'value',
    event: 'dialogVisibleChange'
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    commodityAttribute: {
      type: Array,
      default() {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formData(){
      const keyAttributes = Array.isArray(this.commodityAttribute)
        ? this.commodityAttribute.filter((item) => item.attributeType === 3 && item.attrLevel === 1)
        : [] // 关键属性
      const variableAttribute = Array.isArray(this.commodityAttribute)
        ? this.commodityAttribute.filter((item) => item.attributeType === 3 && item.attrLevel === 0)
        : [] // 类目属性
      return { keyAttributes, variableAttribute }
    }
  },
  methods: {
    handleClose() {
      this.$emit('dialogVisibleChange', false)
    },
    sava() {
      this.$refs.ruleForm.validate((_) => {
        if (_) this.$emit('submitSinkingAttribute')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../css/formcss';

/deep/ .el-dialog__body {
  padding: 10px 20px;
  max-height: 75vh;
}
/deep/ .el-dialog__footer {
  padding-top: 0;
}
/deep/ .head {
  font-weight: 700;
  margin-bottom: 20px;
}
/deep/ .el-col-12{
  min-height: 50px;
  padding-left: 20px!important;
}
</style>
